<template>
    <div class="normal-title" :class="{border}" :style="{height, fontSize, color, fontWeight}">
        <span>{{title}}</span><slot></slot>
    </div>
</template>
<script>
export default {
    name: 'normalTitle',
    props: {
        title: {
            type: String,
            default () {
                return ''
            }
        },
        border: {
            type: Boolean,
            default () {
                return false
            }
        },
        height: {
            type: String,
            default () {
                return '50px'
            }
        },
        fontSize: {
            type: String,
            default () {
                return '16px'
            }
        },
        fontWeight: {
            type: String,
            default () {
                return 'bold'
            }
        },
        color: {
            type: String,
            default () {
                return '#333'
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.normal-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    &.border {
        border-bottom: 1px solid #ddd;
    }
}
</style>